<template>
  <div class="con">
    <el-main style="padding: 0; margin-bottom: 20px" v-loading="dialogVisible">
      <div class="contbox6_10">
        <p class="titlelist6_10">
          O单管理
          <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>首页定制
        </p>
        <p class="shopList"></p>
        <p class="elP">
          操作：点击编辑区域按钮定制；拖动按钮移动，可以设置按钮入口顺序；点击【添加】按钮可以增加站外入口链接
        </p>
        <div class="left">
          <div class="left_a">
            <img src="../../assets/images/hua.png" alt />
            <transition-group tag="div" class="container">
              {{ items }}
              <div
                class="item"
                v-for="(item, index) in items"
                :key="index"
                draggable="true"
                @click="uploadMenuInfo(item)"
                @dragstart="handleDragStart($event, item)"
                @dragover.prevent="handleDragOver($event, item)"
                @dragenter="handleDragEnter($event, item)"
                @dragend="handleDragEnd($event, item)"
              >
                <img :src="item.menuImg" alt />
                <span class="elSP">{{ item.name }}</span>
                <span
                  v-if="item.funStatus == 1"
                  @click.stop="statusMenuInfo(item.id)"
                >
                  <el-button class="el_btn" size="mini">显示</el-button>
                </span>
              </div>
            </transition-group>
            <div style="clear: both"></div>
            <div class="items" @click="addModel">
              <i class="el-icon-plus"></i>
            </div>
            <p class="container_left">
              <span>-------</span>
              可&nbsp;&nbsp;编&nbsp;&nbsp;辑&nbsp;&nbsp;区&nbsp;&nbsp;域
              <span>-------</span>
            </p>

            <div style="clear: both"></div>
            <div class="footer">
              <p>0.00</p>
              <p class="footer_p">本月收益总额（元）</p>
              <div class="footer_main">
                <div class="footer_left">
                  <p>0</p>
                  <p>本月开通产品（个）</p>
                </div>
                <div class="footer_right">
                  <p>0</p>
                  <p>本月伙伴新增（个）</p>
                </div>
              </div>
            </div>
            <p class="left_pp">定制页面</p>
          </div>
        </div>
        <div class="right">
          <div class="left_b">
            <img src="../../assets/images/hua.png" alt />
            <transition-group tag="div" class="container">
              <template v-for="(item, index) in items">
                <div class="item" :key="index" v-if="item.funStatus == '0'">
                  <img :src="item.menuImg" alt />
                  <span class="elSP">{{ item.name }}</span>
                </div>
              </template>

            </transition-group>
            <p class="container_right">
              <span>-------</span>
              可&nbsp;&nbsp;编&nbsp;&nbsp;辑&nbsp;&nbsp;区&nbsp;&nbsp;域
              <span>-------</span>
            </p>
            <div style="clear: both"></div>
            <div class="footer">
              <p>0.00</p>
              <p class="footer_p">本月收益总额（元）</p>
              <div class="footer_main">
                <div class="footer_left">
                  <p>0</p>
                  <p>本月开通产品（个）</p>
                </div>
                <div class="footer_right">
                  <p>0</p>
                  <p>本月伙伴新增（个）</p>
                </div>
              </div>
            </div>
            <p class="left_pp">预览图</p>
          </div>
        </div>
      </div>
      <div class="primary">
        <el-button type="primary" @click="saveMenuInfo" class="primaryIpt"
          >保存</el-button
        >

        <el-tooltip
          effect="dark"
          content="点击默认之后需要保存"
          placement="top"
        >
          <el-button type="primary" @click="fromData" class="primaryIpt"
            >使用默认</el-button
          >
        </el-tooltip>
      </div>
    </el-main>

    <!-- 新增/修改模块 -->
    <addModel
      :addModelShow="addModelShow"
      :uploadMenuInfoType="uploadMenuInfoType"
      :uploadMenuInfoData="uploadMenuInfoData"
      v-on="addModelSuccess()"
    ></addModel>

    <!-- <el-footer style="padding:0;">
            <footerbox></footerbox>
          </el-footer>-->
  </div>
</template>

<script>
import addModel from "./addModel";
import bus from "../../assets/js/bus";
import https from "../../plugins/https";
export default {
  name: "route",
  data() {
    return {
      items: [
        { key: 1, color: "#ffebcc", name: "菜单1" },
        { key: 2, color: "#ffb86c", name: "菜单2" },
        { key: 3, color: "#f01b2d", name: "菜单3" },
        { key: 4, color: "#ccc", name: "菜单4" },
        { key: 2, color: "#f9f9f9", name: "菜单5" },
        { key: 3, color: "blue", name: "菜单6" },
        { key: 1, color: "#999", name: "菜单7" },
        { key: 2, color: "black", name: "菜单8" },
      ],
      dragging: null,
      addModelShow: false,
      dialogVisible: false,
      uploadMenuInfoData: {},
      uploadMenuInfoType: 0,
      status: 0,
      from: false,
    };
  },
  components: {
    // headbox,
    // footerbox,
    // left,
    addModel,
  },
  mounted() {
    this.queryMenuList();
  },
  methods: {
    statusMenuInfo(id) {
      this.dialogVisible = true;
      https.statusMenuInfo({ id: id, status: 0 }).then((res) => {
        if (res.data.code !== "0000") {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
          // this.$notify({ title: "错误", message: res.data.msg, type: "error" });
          this.dialogVisible = false;
          return;
        }
        layer.open({
          content: res.data.msg,
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // this.$notify({ title: "成功", message: res.data.msg, type: "success" });
        this.queryMenuList();
        this.dialogVisible = false;
      });
    },
    uploadMenuInfo(item) {
      console.log(55, item);
      this.addModelShow = true;
      this.uploadMenuInfoData = item;
      this.uploadMenuInfoType = 2;
    },
    saveMenuInfo() {
      if (this.from == true) return;
      this.from = true;
      this.dialogVisible = true;
      for (let i = 0; i < this.items.length; i++) {
        // this.items[i].id = i+1
        this.items[i].code = i + 1 + "";
      }
      let pl = {
        menus: this.items,
        type: this.status,
        oemUid: localStorage.getItem("uid"),
      };
      https.saveMenuInfo(pl).then((res) => {
        if (res.data.code !== "0000") {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
          // this.$notify({ title: "错误", message: res.data.msg, type: "error" });
          this.dialogVisible = false;
          this.from = false;
          return;
        }
        this.status = 0;
        layer.open({
          content: res.data.msg,
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // this.$notify({
        //   title: "保存成功",
        //   message: res.data.msg,
        //   type: "success"
        // });
        this.queryMenuList();
        this.dialogVisible = false;
        this.from = false;
      });
    },
    queryMenuList() {
      if (this.from == true) {
        return;
      }
      this.from = true;
      this.dialogVisible = true;
      https
        .queryMenuList({ oemUid: localStorage.getItem("uid") })
        .then((res) => {
          if (res.data.code !== "0000") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            // this.$notify({ title: "错误", message: res.data.msg, type: "error" });
            this.dialogVisible = false;
            this.from = false;
            return;
          }
          this.from = false;
          this.dialogVisible = false;
          this.items = res.data.data;
        });
    },
    addModel() {
      console.log(23456, this.items.length);
      if (this.items.length >= 20) {
        return layer.open({
          content: "最多只能上传20个图标",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      } else {
        this.addModelShow = true;
        this.uploadMenuInfoType = 1;
        this.uploadMenuInfoData = {};
      }
      // this.$notify({ title: "错误", message: , type: "error" });
    },
    addModelSuccess() {
      bus.$on("addModelSuccess", (res) => {
        this.addModelShow = res.show;
        if (res.type == 1) {
          this.queryMenuList();
        }
      });
    },
    handleDragStart(e, item) {
      console.log(11, e, item);
      this.dragging = item;
    },

    handleDragEnd(e, item) {
      console.log(22, e, item);
      this.dragging = null;
    },

    //首先把div变成可以放置的元素，即重写dragenter/dragover
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move"; // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },

    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = "move"; //为需要移动的元素设置dragstart事件
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.items];
      console.log(33, newItems);
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.items = newItems;
      console.log(44, this.items);
    },
    fromData() {
      this.status = 1;
      let pl = [];
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].createBy != "3") {
          console.log(555, this.items[i]);
          pl.push(this.items[i]);
        }
      }
      console.log(777, pl);
      this.items = pl;
    },
  },
};
</script>

<style scoped>

.con {
  position: relative;
  background: #fff;
}
.el_btn {
  height: 20px;
  font-size: 10px;
  font-weight: 400;
  line-height: 5px;
}
.items {
  width: 40px;
  height: 40px;
  font-size: 13px;
  border: 2px solid #999;
  border-radius: 10px;
  /* line-height: 40px; */
  font-size: 30px;
  text-align: center;
  margin-left: 19.8px;
  cursor: pointer;
}
.items i {
  /* line-height: 40px; */
  color: #999;
}
.el-icon-plus {
  color: black;
}
.primary {
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 10px;
  padding-left: 40%;
  /* margin-left: 40% */
  /* margin-bottom: 20px; */
}
.primary button {
  float: left;
  margin-left: 10px;
}
.footer {
  width: 90%;
  /* height: 100px; */
  border: 1px solid #ccc;
  margin: 0 auto;
  border-radius: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.footer_main {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 10px;
}
.footer_left {
  display: inline-block;
  width: 47%;
  /* border: 1px solid red; */
  border-right: 1px solid #ccc;
}
.footer_right {
  display: inline-block;
  width: 47%;
  margin-left: 2px;
}
.footer p {
  font-size: 12px;
  text-align: center;
  line-height: 25px;
  margin: 0 auto;
}
.footer_p {
  width: 60%;
  border-bottom: 1px solid #ccc;
}
.elSP {
  width: 100%;
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.container {
  width: 100%;
  /* margin: 0 auto; */
  text-align: center;
  /* position: relative; */
}
.container_left {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: tb-rl;
  font-size: 12px;
}
.container_left span,
.container_right span {
  color: #ccc;
}
.container_right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  writing-mode: tb-rl;
  font-size: 12px;
}
.item {
  float: left;
  width: 18%;
  height: 50px;
  font-size: 13px;
  margin-left: 19.8px;
  border-radius: 50%;
  margin-bottom: 45px;
  cursor: pointer;
  background: #ccc;
}
.item img {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #f9f9f9;
  /* border: 1px solid red; */
}
.left_a img {
  width: 100%;
}
.left_b img {
  width: 100%;
}
.left {
  width: 40%;
  float: left;
  height: auto;
  margin-left: 80px;
  position: relative;
  /* border: 1px solid red; */
}
.left_pp {
  float: left;
  width: 100%;
  text-align: center;
  font-size: 12px;
  margin-top: 30px;
}
.left_a {
  width: 50%;
  /* height: 500px; */
  border: 1px solid #ccc;
  position: relative;
}
.left_b {
  width: 50%;
  /* height: 500px; */
  border: 1px solid #ccc;
  position: relative;
}
.right {
  width: 40%;
  float: left;
  margin-left: 80px;
  /* border: 1px solid red; */
}
.titlelist6_10 {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #222;
  margin-top: 40px;
}
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /* overflow-x: auto; */
  box-sizing: border-box;
  float: left;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
  font-size: 16px;
  height: 30px;
  margin-top: 40px;
}
.elP {
  padding-left: 20px;
  font-size: 12px;
  color: #999;
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-button {
  width: 100px;
}

</style>

